<!-- 选车 -->
<template>
  <div class="newCars">
    <van-dropdown-menu active-color="#0b59cd">
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item title="价格">
        <div class="nc-price-list">
          <div>0-5万</div>
          <div>5-8万</div>
          <div>8-15万</div>
          <div>15-20万</div>
          <div>20-30万</div>
          <div>30-50万</div>
          <div>50-70万</div>
          <div>70-100万</div>
          <div>100万以上</div>
        </div>
        <div class="nc-buttom">
          <div>确定</div>
          <div>不限价格</div>
        </div>
      </van-dropdown-item>
      <van-dropdown-item title="用途">
        <div class="nc-purpose">
          <div v-for="(item, index) in purpose" :key="index">{{ item.text }}</div>
        </div>
      </van-dropdown-item>
      <van-dropdown-item @open="more" title="更多" />
    </van-dropdown-menu>
    <!-- 学车列表 -->
    <div class="nc-car-list">
      <div
        @click="VehicleProfile"
        v-for="(item, index) in cardList"
        :key="index"
        class="nc-car-item"
      >
        <img :src="item.img" />
        <div>
          <p>{{ item.name }}</p>
          <div>{{ item.price }}万</div>
          <div>
            <p>共有{{ item.number }}款车型符合条件</p>
            <img src="../../../assets/images/05.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "newCars",
  data() {
    return {
      value1: 0,
      value2: 0,
      // value3: 0,
      // value4: 0,
      // value5: 0,
      option1: [
        { text: "关注高", value: 0 },
        { text: "价格低", value: 1 },
        { text: "价格高", value: 2 }
      ],
      option2: [{ text: "品牌", value: 0 }],
      /* 汽车列表 */
      cardList: [
        {
          img: require("../../../assets/images/00.png"),
          name: "朗逸",
          price: "9.99-16.19",
          number: "14"
        },
        {
          img: require("../../../assets/images/01.png"),
          name: "轩逸",
          price: "9.98-14.00",
          number: "27"
        }
      ],
      purpose: [
        { text: "舒适性好" },
        { text: "想买SUV" },
        { text: "7座大空间" },
        { text: "入门代步" },
        { text: "撩妹神奇" },
        { text: "创业伙伴" },
        { text: "空间宽裕" },
        { text: "硬派越野" },
        { text: "内饰做工上乘" },
        { text: "适合女性" },
        { text: "改装潜力股" },
        { text: "节能先锋" },
        { text: "居家旅行" },
        { text: "小钢炮" },
        { text: "安全性高" },
        { text: "商务行政" },
        { text: "走出校园" },
        { text: "家用座驾" },
        { text: "自吸大排量" }
      ]
    };
  },
  methods: {
    more() {
      this.$router.push({ path: "/More" });
    },
    // 车辆概况跳转
    VehicleProfile() {
      this.$router.push({ path: "/VehicleProfile" });
    }
  }
};
</script>

<style></style>
